import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatIconModule } from '@angular/material/icon';

interface FileUpload {
  file: File;
  url: string;
  progress: number;
}

interface FormData {
  title: string;
  description: string;
  category: string;
  tags: string[];
  isPublic: boolean;
  image: FileUpload | null;
}

@Component({
  selector: 'app-workflow-form',
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatProgressBarModule,
    MatIconModule
  ],
  templateUrl: './workflow-form.component.html',
  styleUrls: ['./workflow-form.component.scss']
})
export class WorkflowFormComponent implements OnInit {
  formGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;
  imagePreview: string | null = null;
  categories = ['技术', '设计', '市场', '运营', '其他'];
  availableTags = ['重要', '紧急', '创新', '合作', '研发', '测试'];

  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      description: ['', [Validators.required, Validators.maxLength(500)]],
      category: ['', Validators.required],
      tags: [[], Validators.required],
      isPublic: [false],
      image: [null]
    });

    this.secondFormGroup = this.fb.group({
      field4: ['', Validators.required],
      field5: ['', Validators.required],
      field6: ['', Validators.required]
    });

    this.thirdFormGroup = this.fb.group({
      field7: ['', Validators.required],
      field8: ['', Validators.required],
      field9: ['', Validators.required]
    });
  }

  ngOnInit(): void {}

  onFileSelected(event: any): void {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        this.imagePreview = reader.result as string;
        this.formGroup.patchValue({
          image: file
        });
      };
      reader.readAsDataURL(file);
    }
  }

  removeImage(): void {
    this.imagePreview = null;
    this.formGroup.patchValue({
      image: null
    });
  }

  onSubmit(): void {
    if (this.formGroup.valid && this.secondFormGroup.valid && this.thirdFormGroup.valid) {
      const formData = {
        ...this.formGroup.value,
        ...this.secondFormGroup.value,
        ...this.thirdFormGroup.value
      };
      console.log('Form submitted:', formData);
    }
  }
}